<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{../lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{../css/okadmin.css}">
    <link rel="stylesheet" th:href="@{../font/iconfont.css}">
    <link rel="stylesheet" th:href="@{../lib/nprogress/nprogress.css}">
    <style type="text/css">
        .layui-form-switch{
            height: 15px;
            line-height: 15px;
        }
        .layui-form-switch i{
            top: 0px;
        }
        /*.layui-table-hover{*/
            /*display: none;*/
        /*}*/
    </style>
</head>
<body>
<div class="ok-body">
    <okToolbar>
        <button class="layui-btn layui-btn-sm" id="addArticle">
            <i class="layui-icon">&#xe61f;</i>新建文章
        </button>
        <a class="layui-btn layui-btn-sm ok-refresh" href="javascript:void(0);" onclick="refreshTable()" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </okToolbar>
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<script th:src="@{../lib/layui/layui.js}"></script>
<script th:src="@{../lib/nprogress/nprogress.js}"></script>
<script>
    NProgress.start();
    window.onload = function () {
        NProgress.done();
    }

    function refreshTable(){
        layui.table.reload('articleTable', {
            page: {
                curr: 1 //重新从第 1 页开始
            }, where: {}
        });
    }

    layui.use(['table', 'form', 'jquery', 'laydate'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var form = layui.form;

        var typeMap = {};
        $.ajax({
            url : "types",
            dataType : "json",
            method : "get",
            async : false,
            success : function (data) {
                typeMap = data;
            }
        });

        laydate.render({
            elem: '#startTime',
            type: "datetime"
        });

        laydate.render({
            elem: '#endTime',
            type: "datetime"
        });

        table.render({
            elem: '#tableId',
            id:"articleTable",
            url: 'queryPage',
            limit: 10,
            page: true,
            even: true, //开启隔行背景
            size: 'sm', //小尺寸的表格
            hideTip : true,
            cols: [[
                {field: 'title', title: '文章标题', minWidth : 300, fixed : "left"},
                {field: 'subTitle', title: '副标题', minWidth : 300},
                {field: 'author', title: '作者', minWidth: 110},
                {field: 'type', title: '分类', minWidth: 110,
                    templet : function(d){
                        return typeMap[d.type];
                    }
                },
                {field: 'carousel', title: '是否轮播', minWidth: 110, templet: '#statusTpl'},
                {field: 'priority', title: '优先级',minWidth:110},
                {templet: '#operationTpl', minWidth: 120, align: 'center', title: '操作'}
            ]],
            done : function(res, curr, count){
                $(".layui-table-cell").on("mouseover", function () {
                    var othis = $(this);
                    if(Math.round(othis.prop('scrollWidth')) > Math.round(othis.outerWidth())){
                        layer.tips(othis.text(), othis, {tips : 3});
                    }
                })
            }
        });

        table.on('tool(tableFilter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'editArticle') {
                location.href = "editPage?id=" + data.id;
            } else if (layEvent === 'del') {
                layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
                    $.ajax({
                        url : "delete?id=" + data.id,
                        method : "get",
                        dataType : "json",
                        success : function (result) {
                            if(result.success){
                                layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
                                    refreshTable();
                                });
                            }else{
                                layer.msg("删除失败, 稍后重试!", {icon: 1, time: 1000});
                            }
                        },
                        error: function () {
                            layer.msg("删除失败, 稍后重试!", {icon: 1, time: 1000});
                        }
                    })
                });
            }
        });

        form.on("switch(carousel)", function(data){
            $.ajax({
                url : "updateCarousel",
                dataType : "json",
                data : {
                    id :  $(data.elem).data('id'),
                    carousel : data.elem.checked ? 1 : 0
                },
                success : function(result){
                    if(!result.success){
                        data.elem.checked = !data.elem.checked;
                        form.render();
                    }
                },
                error : function(){
                    data.elem.checked = !data.elem.checked;
                    form.render();
                }
            });
        });

        $("#addArticle").click(function () {
            location.href = "addPage";
        })

    })
</script>
<!--模板-->
<script type="text/html" id="statusTpl">
    <input type="checkbox" name="status" lay-filter="carousel" data-id="{{d.id}}" lay-skin="switch" lay-text="是|否" {{d.carousel== 1 ? 'checked' : ''}} >
</script>
<script type="text/html" id="operationTpl">
    <a href="javascript:;" class="ok-row-operate" title="编辑" lay-event="editArticle"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:;" class="ok-row-operate" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>
